<template>
	<!-- <custom-tabbar> -->
	<view class="container">
		<status-bar title="称重记录" />
		<view class="select">
			<u-form labelPosition="left" :model="model" ref="uForm" labelWidth='90'>
				<u-form-item label="线缆类型 :">
					<view class="" style="border: 1px solid #bcbcbc;border-radius: 16rpx;width: 100%;">
						<u-input v-model="model.cableClass" placeholder="请输入线缆类型">
						</u-input>
					</view>
				</u-form-item>
				<u-form-item label="规格型号 :">
					<view class="" style="border: 1px solid #bcbcbc;border-radius: 16rpx;width: 100%;">
						<u-input v-model="model.cableModel" placeholder="请输入规格型号"></u-input>
					</view>
				</u-form-item>
			</u-form>
			<view class=""
				style="display: flex;align-items: center;margin-top: 12rpx;justify-content: center;gap: 20rpx;">
				<u-button type="primary" text="查询" icon="search" @click="search"></u-button>
				<u-button text="重置" icon="reload" @click="reset"></u-button>
			</view>
			<view class="" style="margin-top: 20rpx;">
				<u-button @click="add" type="success" text="添加" icon="plus"></u-button>
			</view>
		</view>
		<scroll-view class="content" scroll-y="true" @scrolltolower="lower" style="height: 100%;">

			<view class="item" v-for="(item, index) in dataList" :key="item.id">
				<view class="item-o">
					<view class="key">序号:</view>
					<view class="key2">{{index+1}}</view>
					<view class="" style="margin-left: auto;display: flex;align-items: center;gap: 20rpx;">
						<u-tag text="编辑" icon="edit-pen" @click="edit(item)"></u-tag>
						<!-- <u-tag text="删除" type="error" icon="close-circle" @click="deleteD(item)"></u-tag> -->
					</view>
				</view>
				<view class="item-o">
					<view class="key">线缆类型:</view>
					<view class="key2">{{item.cableClass}}</view>
				</view>
				<view class="item-o">
					<view class="key">规格型号:</view>
					<view class="key2">{{item.cableModel}}</view>
				</view>

				<view class="item-o">
					<view class="key">重量:</view>
					<view class="key2">{{item.weight}}</view>
				</view>
				<view class="item-o">
					<view class="key">测量长度:</view>
					<view class="key2">{{item.measuringLength}}</view>
				</view>

				<view class="item-o">
					<view class="key">估算长度:</view>
					<view class="key2">{{item.estimatedLength}}</view>
				</view>
				<view class="item-o">
					<view class="key">录入时间:</view>
					<view class="key2">{{item.createTime}}</view>
				</view>


			</view>

		</scroll-view>
	</view>
	<!-- </custom-tabbar> -->
</template>

<script>
	import CustomTabbar from "@/components/CustomTabbar.vue";
	import {
		getWeight
	} from "@/common/api.js"
	export default {
		components: {
			CustomTabbar,
		},
		data() {
			return {
				model: {
					cableClass: "",
					cableModel: "",

				},
				pageNum: 1,
				pageSize: 20,
				dataList: [],
				isHave: true

			}
		},
		methods: {
			search() {
				this.isHave = true;
				this.dataList = []
				this.pageNum = 1
				this.getData()
			},
			reset() {
				this.model = {
					cableClass: "",
					cableModel: "",
				}
				this.search()
			},
			lower() {
				
				if (this.isHave) {
					this.pageNum += 1;
					this.getData();
				}

			},
			getData() {
				let param = {
					...this.model,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				getWeight(param).then((res) => {
					if (res.success) {
						this.dataList = [...this.dataList, ...res.data.records];
						if (res.data.records.length < this.pageSize) {
							this.isHave = false;
						} else {
							this.isHave = true;
						}
					}
				})
			},
			add() {
				uni.navigateTo({
					url: '/pages/weight/addWeight'
				})
			},
			edit(item) {
			uni.navigateTo({
				url: `/pages/weight/addWeight?id=${item.id}`
			})
			},
			deleteD(item) {
				
			}
		},
		created() {
			// this.getData()
		},
		onShow() {
			this.search()
		},

	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		// height: calc(100vh - 50px);
		display: flex;
		flex-direction: column;


		.select {
			padding: 20rpx 30rpx;
		}

		.content {
			flex: 1;
			min-height: 0;
			// margin-bottom: 52px;
			margin-bottom: 20rpx;

			.item {
				color: lightslategrey;
				background-color: #F2F6FC;
				margin: 30rpx 30rpx;
				border-radius: 12rpx;
				padding: 10rpx 20rpx;

				.item-o {
					display: flex;
					align-items: center;
					margin: 10rpx 0rpx;

					.key {
						width: 150rpx;
						text-align: right;
					}

					.key2 {
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>